{% load i18n %}
{% load static %}
{% load simpletags %}

{% verbatim line-chart %}
<script type="text/javascript">
  Vue.component('display-line-chart', {
    props: ['source'],
    template: `
    <div>
      <el-container>
        <el-main>
          <div id="line-chart" style="width: 100%;"></div>
        </el-main>
      </el-container>
    </div>
    `,
    data: function () {
      return {
        staticsData: {},
      }
    },
    created: function () {
      this.getEnrollTrendingData(this.drawLine);
    },
    methods: {
      drawLine() {
        const chart = new G2.Chart({
            container: 'line-chart',
            forceFit: true,
            height: '320',
            padding: [120, 20, 20, 20] // 上右下左
          });
          chart.source(this.staticsData);
          chart.tooltip({
            follow: false,
            crosshairs: 'y',
            htmlContent: function htmlContent(title, items) {
              let html = '<div class="custom-tooltip">';
              for (let i = 0; i < items.length; i++) {
                let item = items[i];
                var domHead = '<div class="custom-tooltip-item" style="border-left-color:' + item.color + '">';
                var domName = '<div class="custom-tooltip-item-name">' + item.name + '</div>';
                var domValue = '<div class="custom-tooltip-item-value">' + item.value + '</div>';
                var domTail = '</div>';
                html += domHead + domName + domValue + domTail;
              }
              return html + '</div>';
            }
          });
          chart.axis('stu_entrance_time__year', {
            label: {
              textStyle: {
                fill: '#aaaaaa'
              }
            }
          });
          chart.axis('count', {
            label: {
              textStyle: {
                fill: '#aaaaaa'
              },
              formatter: function formatter(text) {
                return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
              }
            }
          });
          chart.legend(false);
          chart.line().position('stu_entrance_time__year*count').color('stu_academy__aca_cname');
          chart.render();
      },
      getEnrollTrendingData(callback) {
        Vue.prototype.$http = axios;
        let _this = this;
        this.$http.get(_this.source, {})
            .then(function (res) {
              _this.staticsData = res.data.statistic;
              callback();
            })
            .catch(function (error) {
              console.log(error);
            });
      },
    }
  })
</script>
{% endverbatim line-chart %}
